{% extends 'base.html' %}
{% load  staticfiles %}
{% block aside %}
    <section class="vbox">
    <section class="scrollable">
      <section class="hbox stretch">
        <aside class="aside-lg bg-light lter b-r">
          <section class="vbox">
            <section class="scrollable">
              <div class="wrapper" style="min-height: 750px">
                <div class="text-center m-b m-t">
                  <a class="thumb-lg">
                    <img src="{{ user.avatar.url }}" class="img-circle">
                  </a>
                  <div>
                    <div class="h3 m-t-xs m-b-xs">{{ user.username }}</div>
                    <strong class="text-muted"><a href="{% url 'user:edit_profile' %}?next={{ request.path }}">修改资料</a></strong>
                    &nbsp;&nbsp;
                    {% if user.is_auth == 0 %}
                      <strong class="text-muted"><a href="{% url 'user:certification' %}">实名认证</a></strong>
                    {% else %}
                      <strong class="text-muted">已实名</strong>
                    {% endif %}
                  </div>
                </div>
                <div class="panel wrapper">
                  <div class="row text-center">
                    <div class="col-xs-6">
                      <a>
                        <span class="m-b-xs h4 block">{{ user.fan_count }}</span>
                        <small class="text-muted">粉丝</small>
                      </a>
                    </div>
                    <div class="col-xs-6">
                      <a>
                        <span class="m-b-xs h4 block">{{ user.follow_count }}</span>
                        <small class="text-muted">关注</small>
                      </a>
                    </div>
                  </div>
                </div>
              <div>
                  <small class="text-uc text-xs text-muted">关于我</small>
                  <p>Artist</p>
                  <small class="text-uc text-xs text-muted">个人简介</small>
                  <p>{{ user.summary }}</p>
                  <small class="text-uc text-xs text-muted">注册时间</small>
                  <p>{{ user.date_joined }}</p>
                  <small class="text-uc text-xs text-muted">昵称</small>
                  <p>{{ user.username }}</p>
                  <small class="text-uc text-xs text-muted">年龄</small>
                  <p>{{ user.age }}</p>
                  <small class="text-uc text-xs text-muted">邮箱</small>
                  <p>{{ user.email }}</p>
                  <div class="line"></div>
                  <small class="text-uc text-xs text-muted">联系方式</small>
                  <p class="m-t-sm">
                    <a href="#" class="btn btn-rounded btn-twitter btn-icon"><i class="fa fa-twitter"></i></a>
                    <a href="#" class="btn btn-rounded btn-facebook btn-icon"><i class="fa fa-facebook"></i></a>
                    <a href="#" class="btn btn-rounded btn-gplus btn-icon"><i class="fa fa-google-plus"></i></a>
                  </p>
              </div>
            </div>
            </section>
          </section>
        </aside>
        <aside class="bg-white">
          <section class="vbox">
            <header class="header bg-light lt">
              <ul class="nav nav-tabs nav-white">
                <li class="active"><a href="#trends" data-toggle="tab">动态</a></li>
                <li class=""><a href="#musics" data-toggle="tab">音乐收藏</a></li>
                <li class=""><a href="#posts" data-toggle="tab">主题帖收藏</a></li>
              </ul>
            </header>
            <section class="scrollable">
              <div class="tab-content" style="min-height: 620px">
                <div class="tab-pane active" id="trends">
                <section class="panel-body">
                  {% for trend in trend_list %}
                      <article class="media">
                          <span class="pull-left thumb-sm"><a href="{% url 'user:show_another' trend.user_id %}"><img class="img-circle" alt="..." src="{{ trend.user.avatar.url }}"></a></span>
                        <div class="media-body">
                          <div class="pull-right media-xs text-center text-muted">
                            <strong class="h4">{{ trend.trend_time }}</strong><br>
                            <a href="{% url 'trend:trend_delete' trend.id %}?next={{ request.path }}" class="btn btn-success btn-xs">
                              移除该动态
		                    </a>
                          </div>
                          <a class="h4">{{ trend.user.username }} {{ trend.content }}</a>
                        </div>
                      </article>
                      <div class="line b-b"></div>
                  {% endfor %}
                  </section>
                </div>
                <div class="tab-pane" id="musics">
                  <section class="panel-body">
                  {% for f_music in f_music_list %}
                      <article class="media">
                        <span class="pull-left thumb-sm"><img class="img-circle" alt="..." src="{{ f_music.music.music_cover.url }}"></span>
                        <div class="media-body">
                          <div class="pull-right media-xs text-center text-muted">
                            <strong class="h4">{{ f_music.collect_time }}</strong><br>
                            <a href="{% url 'favorite:delete_favorite_music' f_music.id %}?next={{ request.path }}" class="btn btn-success btn-xs">
                              移除该音乐
		                    </a>
                          </div>
                          <a class="h4" href="#">《{{ f_music.music.name }}》</a>
                          <small class="block" style="font-size: 18px"><a href="#">&nbsp&nbsp&nbsp{{ f_music.user.username }}</a></small>
                        </div>
                      </article>
                      <div class="line b-b"></div>
                  {% endfor %}
                  </section>
                </div>
                <div class="tab-pane" id="posts">
                  <section class="panel-body">
                  {% for f_post in f_post_list %}
                      <article class="media">
                        <span class="pull-left thumb-sm"><img class="img-circle" alt="..." src="{{ f_post.user.avatar.url }}"></span>
                        <div class="media-body">
                          <div class="pull-right media-xs text-center text-muted">
                            <strong class="h4">{{ f_post.collect_time }}</strong><br>
                            <a href="{% url 'favorite:delete_favorite_post' f_post.id %}?next={{ request.path }}" class="btn btn-success btn-xs">
                              移除该主题
		                    </a>
                          </div>
                          <a class="h4" href="#">《{{ f_post.post.title }}》</a>
                          <small class="block" style="font-size: 18px"><a href="#">&nbsp&nbsp&nbsp{{ f_post.user.username }}</a></small>
                        </div>
                      </article>
                      <div class="line b-b"></div>
                  {% endfor %}
                  </section>
                </div>
              </div>
            </section>
          </section>
        </aside>
        <aside class="col-lg-3 b-l">
          <section class="vbox">
            <section class="scrollable padder-v">
              <div class="panel">
                <h4 class="font-thin padder">未读消息</h4>
                <ul class="list-group">
                {% for notification in request.user.notifications.unread %}
                  <li class="list-group-item">
                      <p>{{ notification.verb }}《{{ notification.target }}》</p>
                      <small class="block text-muted"><i class="fa fa-clock-o"></i> {{ notification.timesince }} 之前</small>
                  </li>
                {% empty %}
                    <li class="list-group-item">
                      <p>没有未读消息</p>
{#                      <small class="block text-muted"><i class="fa fa-clock-o"></i> {{ notification.timesince }} 之前</small>#}
                  </li>
                {% endfor %}
                </ul>
              </div>
            </section>
          </section>
        </aside>
      </section>
    </section>
{% endblock aside %}